<template>
	<view class="container">
		<nav-bar backState="2000" fontColor="#fff" :scrollTop="0" :bgColor="['#f00','#00cdff']" title=""></nav-bar>
		<view class="g-title">
			<view class="login-welcome">欢迎登录</view>
			<view class="login-title">Digitwins Octopus三维可视化运维平台</view>
			<view class="login-title">如皋废气治理项目</view>
		</view>

		<view class="g-input">
			<ss-input maxlength="11" type="text" style="padding-top: 0upx;" placeholder="请输入帐号" @onInputValueChanged="onPhoneInputChanged"
			 :defaultValue="defaultUser"></ss-input>
			<ss-input maxlength="16" type="password" :ishowpwd="true" style="margin-top: 32upx; padding-top: 0upx;" placeholder="请输入密码"
			 @onInputValueChanged="onVerifyInputChanged" :defaultValue="defaultPwd"></ss-input>
		</view>

		<view class="g-lan" v-if="false">
			<view class="login-lan">中文</view>
			<image class="login-flag" src="../../static/login-flag.png"></image>
		</view>

		<view class="g-lan">
			<view class="tip_and_forget" v-if="tipMessage.length > 0">{{tipMessage}}</view>
		</view>

		<button @click="nextStep" class="common-btn login-btn" :disabled="isBtnActive">登录</button>

		<view class="footer">

		</view>

		<uni-popup ref="commitPopup" type="bottom" :animation="true" :mask-click="false" :maskClick="false">
			<view class="popup">
				<view class="title">服务协议和隐私政策</view>
				<view class="content">请你务必审慎阅读、充分理解“服务协议”和“隐私政策”各条款，包括但不限于：为了向你提供内容分享等服务我需要收集你的设备信息、操作日志等个人信息。你可以在“设置”中查看、变更、删除个人信息并管理你的授权。</view>
				<view class="content">你可阅读《服务协议》和《隐私政策》了解详细信息。如你同意，请点击“同意”开始接受我们的服务。</view>

				<view class="content" style="color: #007AFF;" @click="onFooterServiceClick">《服务协议》</view>
				<view class="content" style="color: #007AFF;" @click="onFooterSecretClick">《隐私政策》</view>
				<view class="line"></view>
				<view class="btns">
					<view class="btns-cancel" @click="popupCancel">暂不使用</view>
					<view class="btns-ok" @click="popupOk">同意</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import inputVerification from '@/common/verification.js';
	import ssInput from '@/components/ss-input/ss-input.vue';
	import JSEncrypt from "@/common/JSEncrypt/jsencrypt.js"
	import pulic_key from '@/common/JSEncrypt/publickey.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'

	import {
		loginByPWD
	} from '@/services/account.js';
	import Http from '@/common/http'
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			ssInput,
			uniPopup
		},

		computed: {
			...mapState(['hasLogin'])
		},

		data() {
			return {
				tipMessage: "",
				inputPhoneStr: '',
				isBtnActive: true,

				defaultUser: "",
				defaultPwd: "",
			}
		},

		onLoad() {
			this.loadSavedUserInfo();
		},

		mounted() {
			this.inputPhoneStr = this.defaultUser;
			this.inputVerifyStr = this.defaultPwd;
			this.isEveryInputIsOK();
			this.checkIsGree();
		},

		methods: {
			...mapMutations(['login']),

			checkIsGree() {
				let isFirstLogin = uni.getStorageSync('firstLogin');
				if (isFirstLogin == null || isFirstLogin == false) {
					this.$refs.commitPopup.open();
					return false;
				}
				return true;
			},

			onFooterServiceClick() {
				console.log("onFooterServiceClick")
				uni.navigateTo({
					url: '/pages/webPage/webPage?url=http://47.93.216.132:8051/xieyi.html',
				})
			},

			onFooterSecretClick() {
				console.log("onFooterSecretClick")
				uni.navigateTo({
					url: '/pages/webPage/webPage?url=http://47.93.216.132:8051/yinsi.html',
				})
			},

			loadSavedUserInfo() {
				let userInfo = uni.getStorageSync('userInfo');
				console.log(userInfo)
				if (userInfo != null && userInfo.userEntity != null) {
					this.defaultUser = userInfo.userEntity.account;
					this.defaultPwd = userInfo.userEntity.password;
				}
			},

			onPhoneInputChanged(event) {
				this.inputPhoneStr = event;
				this.tipMessage = '';
				this.isEveryInputIsOK();
			},

			onVerifyInputChanged(event) {
				this.inputVerifyStr = event
				this.tipMessage = '';
				this.isEveryInputIsOK();
			},

			isEveryInputIsOK() {
				if (this.isPhoneInputOK() && this.isVerfyInputOK())
					this.isBtnActive = false;
				else
					this.isBtnActive = true;
			},

			isPhoneInputOK() {
				// debugger
				let isNull = inputVerification.verificationFuc({
					name: 'isNull',
					value: this.inputPhoneStr
				})
				if (!isNull) {
					return false;
				} else {
					return isNull.flag
				}
			},

			isVerfyInputOK() {
				let isNull = inputVerification.verificationFuc({
					name: 'isNull',
					value: this.inputVerifyStr
				})
				if (!isNull)
					return false;
				else 
					return true;
				// else {
				// 	let isRight = inputVerification.verificationFuc({
				// 		name: 'code',
				// 		value: this.inputVerifyStr
				// 	})
				// 	return isRight.flag
				// }
			},

			nextStep() {
				if (!this.checkIsGree())
					return;

				uni.showLoading({
					title: '加载中'
				})

				let _cid = 'by_web_no_cid';
				// #ifdef APP-PLUS
				const clientInfo = plus.push.getClientInfo()
				_cid = clientInfo.clientid;
				// #endif

				let jSEncrypt = new JSEncrypt();
				jSEncrypt.setPublicKey(pulic_key);
				let _temppwd = jSEncrypt.encrypt(this.inputVerifyStr);

				loginByPWD({
					userAccount: this.inputPhoneStr,
					password: this.inputVerifyStr,
					clientId: _cid,
				}).then((res) => {
					if (res.code == '000000') {
						let _localdata = new Object();
						_localdata.inputType = 'login';
						_localdata.phoneNumber = this.inputPhoneStr;
						this.reLaunchIndex(res.data)
					} else {
						this.tipMessage = res.message
					}
					uni.hideLoading();
				});
			},

			_genLoginData(data) {
				if (data.token.length > 0) {
					this.login(data.user_info);
					Http.token = data.token
					console.log('_genLoginData token=' + Http.token + 'name = ')
				}
			},

			reLaunchIndex(reData) {
				this._genLoginData(reData);
				uni.reLaunch({
					url: '/pages/home/homeCustom?inputType=login',
				})
			},

			popupCancel() {
				// #ifdef APP-PLUS  
				plus.runtime.quit();
				// #endif
				this.$refs.commitPopup.close();
			},

			popupOk() {
				uni.setStorage({ //缓存用户登陆状态
					key: 'firstLogin',
					data: true
				})
				this.$refs.commitPopup.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		// padding: 0upx 32upx 0 32upx;
		background: url('~@/static/login_bg.png') no-repeat;
		background-size: 100% 100%;
		height: 100vh;
		background-color: #000;
	}

	.login-bg {
		position: absolute;
		width: 100%;
		height: 50%;
		top: 60upx;
		z-index: -1;
		background-image: url('~@/static/login_bg.png');

	}

	.g-title {
		margin-top: 80upx;
		padding: 0upx 32upx 0 32upx;

		.login-welcome {
			font-size: 64upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color: #000000;
			line-height: 90upx;
		}

		.login-title {
			font-size: 30upx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 60upx;

		}
	}

	.g-input {
		margin-top: 100upx;
		padding: 0upx 32upx 0 32upx;
	}

	.login-btn {
		margin: 80upx 32upx 0 32upx;
		color: #FFFFFF;
		background: #327FFC;
		border-radius: 25px;
	}
	
	button[disabled] {
		color: #FFFFFF;
		background: #6FA5FC;
		border-radius: 50px;
	}

	.g-lan {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		margin-top: 24upx;
		padding: 0upx 32upx 0 32upx;

		.login-flag {
			width: 48upx;
			height: 48upx;
		}

		.login-lan {
			font-size: 12px;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.85);
			line-height: 17px;
			margin-left: 20upx;
		}

		.tip_and_forget {
			width: 100%;
			left: 10upx;
			text-align: center;
			color: #DD514C;
		}
	}

	.footer {
		position: absolute;
		width: calc(100% - 64upx);

		bottom: 20upx;
		background-color: #4CD964;
	}

	.popup {
		// width: 100vw;
		// height: 360px;
		background: #FFFFFF;
		box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.09);
		padding: 30upx 30upx 80upx 30upx;
		border-radius: 12px;

		.title {
			font-size: 25px;
		}

		.content {
			font-size: 18px;
			margin-top: 20upx;
		}

		.line {
			width: 100%;
			height: 2upx;
			background-color: #007AFF;
			margin-top: 20upx;
			margin-bottom: 20upx;
		}

		.btns {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
		}

		.btns-cancel {
			width: 45%;
			color: #3F536E;
			font-size: 20px;
			text-align: center;
		}

		.btns-ok {
			width: 45%;
			color: #007AFF;
			font-size: 20px;
			text-align: center;
		}
	}



	// <view class="line"></view>
	// <view class="btns">
	// 	<view class="cancelbtn">暂不使用</view>
	// 	<view class="okbtn">同意</view>
	// </view>
</style>
